import React from 'react';
import { observer } from 'mobx-react';
import { WeaBrowser } from 'ecCom';
import { spellResourceCondition } from '../../../components/excel-layout/cell-field/browser-element/Browser';
import { toJS } from 'mobx';

interface Props {
  editable?: boolean;
  value?: string;
  valueSpan?: string;
  onChange: any;
  column?;
  row?;
  replaceDatas?;
}

@observer
export default class Browser extends React.Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = { replaceDatas: undefined };
  }

  render() {
    const { column, row } = this.props;
    let hide = column && column.isHide && column.isHide(row);
    let replaceDatas: any = [];
    let replaceDatas1: any = [];
    let names: any;
    const browserProps = column.browserConditionParam || {};
    let tempBrowserProps = {
      dataParams:browserProps.dataParams,
      conditionDataParams:browserProps.conditionDataParams,
      completeParams:browserProps.completeParams,
    }
    if (this.props.editable) {
      let ids = row.$(column.key).values().split(',');
      let names = row.$(column.key + 'span').values() ? JSON.parse(row.$(column.key + 'span').values()) : '';
      ids.forEach((element, index) => {
        if (element != '') replaceDatas.push({ id: element, name: names[index] });
      });
      if(column.fieldtype == '141'){
        if(row.$(column.key + 'span').values()){
          let spanvalue = JSON.parse(row.$(column.key + 'span').values());
          spanvalue.forEach((element)=>{
            if(element != null && element.prop ){
              replaceDatas1.push(element.prop);
            }
          });
        }
      }
      const bind = toJS(row.$(column.key).bind()) || {};
      const bindBrowsers = bind.browserProps;
      tempBrowserProps = {
        dataParams:{...tempBrowserProps.dataParams,...bindBrowsers.dataParams},
        conditionDataParams:{...tempBrowserProps.conditionDataParams,...bindBrowsers.conditionDataParams},
        completeParams:{...tempBrowserProps.completeParams,...bindBrowsers.completeParams},
      }
      // dataParams = { ...dataParams, ...bind.dataParams };
      // conditionDataParams = { ...conditionDataParams, ...bind.conditionDataParams };
      // completeParams = { ...completeParams, ...bind.completeParams };
    } else {
      names = row.$(column.key + 'span').values();
    }

    if (column.fieldtype == '34') {//请假类型浏览框单独处理，设置value
      return (
        <div style={hide ? { display: 'none' } : { display: 'block' }}>
          {this.props.editable ?
            <WeaBrowser
              {...browserProps}
              {...tempBrowserProps}
              //replaceDatas={this.state.replaceDatas || replaceDatas}
              value={replaceDatas[0] && replaceDatas[0].id}
              onChange={(ids, names, datas) => {
                //this.setState({replaceDatas: datas});
                this.props.onChange(ids, names, datas);
                if (column && column.onChange) {
                  column.onChange(ids, row, names, datas);
                }
              }} /> : <span dangerouslySetInnerHTML={{ __html: names }}></span>}
        </div>
      )
    }else if(column.fieldtype == '141'){
      return (
      <div style={hide ? { display: 'none' } : { display: 'block' }}>
          {this.props.editable ?
            <WeaBrowser
              {...browserProps}
              {...tempBrowserProps}
              replaceDatas={this.state.replaceDatas || replaceDatas1}
              onChange={(ids, names, datas) => {
                this.setState({ replaceDatas: datas });
                let id = spellResourceCondition(datas);
                this.props.onChange(id, names, datas);
                if (column && column.onChange) {
                  column.onChange(id, row, names, datas);
                }
              }} /> : <span dangerouslySetInnerHTML={{ __html: names }}></span>}
        </div>
      )
    } else {
      return (
        <div style={hide ? { display: 'none' } : { display: 'block' }}>
          {this.props.editable ?
            <WeaBrowser
              {...browserProps}
              {...tempBrowserProps}
              replaceDatas={this.state.replaceDatas || replaceDatas}
              onChange={(ids, names, datas) => {
                this.setState({ replaceDatas: datas });
                this.props.onChange(ids, names, datas);
                if (column && column.onChange) {
                  column.onChange(ids, row, names, datas);
                }
              }} /> : <span dangerouslySetInnerHTML={{ __html: names }}></span>}
        </div>
      )
    }
  }
}
